<template>
  <div class="crumbs">
    <crumbs></crumbs>
  </div>
    <el-steps :active="active" finish-status="success" align-center @tab-click="handleClick">
     <el-step />
     <el-step />
     <el-step />
     <el-step />
     <el-step />
     <el-step /> 
   </el-steps>
   <div class="tab">
     <div class="content">
         <!--4个标题-->
         <div class="title">
            <p :class="index == number ? 'btn1':'btn'" @click="tab(index)" v-for="(item ,index) in dataList"
                 :key="index">{{item.option}}
          </p>
         </div>
       <!--4个div-->
       <div id="content1" v-show="number == 0">
         <span>
            <!-- 企业基本信息 -->
            <el-form label-width="150px" :inline="true" :model="formInline" class="demo-form-inline">
        <el-row>
            <el-form-item label="企业名称">
            <el-input v-model="name"  placeholder="企业名称" />
          </el-form-item>
          <el-form-item label="组织机构代码">
            <el-input v-model="organization_code" placeholder="组织机构代码" />
          </el-form-item>
          <el-form-item label="社会信用证编号">
            <el-input v-model="sc_number" placeholder="社会信用证编号" />
          </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="成立时间">
            <el-input v-model="founding_time" placeholder="成立时间" />
          </el-form-item>
          <el-form-item label="注册资本（万元）">
            <el-input v-model="capital" placeholder="注册资本（万元）" />
          </el-form-item>
          <el-form-item  label="企业分级">
            <el-select  v-model="grade" placeholder="企业分级">
              <el-option label="一级" value="shanghai" />
              <el-option label="二级" value="beijing" />
            </el-select>
          </el-form-item>
          </el-row>
        <el-row>
          <el-form-item label="控股类型">
            <el-select v-model="type" placeholder="控股类型">
              <el-option label="一级" value="shanghai" />
              <el-option label="二级" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="所属行业">
            <el-select  v-model="industry"  placeholder="所属行业">
              <el-option label="农业" value="农业" />
              <el-option label="二级" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="单位规模">
            <el-select  v-model="scale" placeholder="单位规模">
              <el-option label="一级" value="shanghai" />
              <el-option label="二级" value="beijing" />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item  label="运营状态">
            <el-select  v-model="status" placeholder="运营状态">
              <el-option label="一级" value="shanghai" />
              <el-option label="二级" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="法人代表">
            <el-input v-model="representative" placeholder="法人代表" />
          </el-form-item>
          <el-form-item label="法人固话">
            <el-input v-model="tel" placeholder="法人固话" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="法人手机">
            <el-input v-model="phone" placeholder="法人手机" />
          </el-form-item>
          <el-form-item label="法人邮箱">
            <el-input v-model="email" placeholder="法人邮箱" />
          </el-form-item>
        </el-row>
        </el-form>
        </span>
       </div>
       <div id="content2" v-show="number == 1">
         <span> 、
          <el-form label-width="200px" :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="省（自治区、直辖市）">
        <el-input  v-model="province" placeholder="省（自治区、直辖市）" />
      </el-form-item>
      <el-form-item label="地（区、市、州、盟）">
        <el-input  v-model="land" placeholder="地（区、市、州、盟）" />
      </el-form-item>
      <el-form-item label="区（县、市、旗）">
        <el-input v-model="zone" placeholder="区（县、市、旗）" />
      </el-form-item>
      <el-form-item label="街（乡、镇）">
        <el-input v-model="street" placeholder="街（乡、镇）" />
      </el-form-item>
      <el-form-item label="详细地址">
        <el-input v-model="address" placeholder="详细地址" />
      </el-form-item>
      <el-form-item label="邮政编码">
        <el-input v-model="postalcode" placeholder="邮政编码" />
      </el-form-item>
      <el-form-item label="所属园区">
        <el-input v-model="park" placeholder="所属园区" />
      </el-form-item>
      <el-form-item label="所属楼宇">
        <el-input v-model="build" placeholder="所属楼宇" />
      </el-form-item>
    </el-form>
         </span>
       </div>
       <div id="content3" v-show="number == 2">
         <span>
          <el-form label-width="200px" :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="省（自治区、直辖市）">
        <el-input  v-model="province2" placeholder="省（自治区、直辖市）" />
      </el-form-item>
      <el-form-item label="地（区、市、州、盟）">
        <el-input  v-model="land2" placeholder="地（区、市、州、盟）" />
      </el-form-item>
      <el-form-item label="区（县、市、旗）">
        <el-input v-model="zone2" placeholder="区（县、市、旗）" />
      </el-form-item>
      <el-form-item label="街（乡、镇）">
        <el-input v-model="street2" placeholder="街（乡、镇）" />
      </el-form-item>
      <el-form-item label="详细地址">
        <el-input v-model="address2" placeholder="详细地址" />
      </el-form-item>
      <el-form-item label="邮政编码">
        <el-input v-model="postalcode2" placeholder="邮政编码" />
      </el-form-item>
      <el-form-item label="所属园区">
        <el-input v-model="park2" placeholder="所属园区" />
      </el-form-item>
      <el-form-item label="所属楼宇">
        <el-input v-model="build2" placeholder="所属楼宇" />
      </el-form-item>
    </el-form>
         </span>
       </div>
       <div id="content4" v-show="number == 3">
         <span>
          <el-form label-width="200px" :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="联系电话">
        <el-input v-model="tel2"  placeholder="联系电话" />
      </el-form-item>
      <el-form-item label="传真号码">
        <el-input v-model="faxcode"  placeholder="传真号码" />
      </el-form-item>
      <el-form-item label="联系人姓名">
        <el-input v-model="name2" placeholder="联系人姓名" />
      </el-form-item>
      <el-form-item label="联系人职务">
        <el-input v-model="job" placeholder="联系人职务" />
      </el-form-item>
      <el-form-item label="联系人手机">
        <el-input v-model="phone2" placeholder="联系人手机" />
      </el-form-item>
      <el-form-item label="联系人邮箱">
        <el-input v-model="email2" placeholder="联系人邮箱" />
      </el-form-item>
      <el-form-item label="公司网址">
        <el-input v-model="url" placeholder="公司网址" />
      </el-form-item>
    </el-form>
         </span>
       </div>
       <div id="content5" v-show="number == 4">
        <!-- 附件信息 -->
        <span>
            <p align="left">附件文档: </p>
            <hr>
            <div style="text-align:left;">
            <el-upload
          
              class="upload-demo"
              action="http://1.14.73.59:8080/enterprise/scFile"
              multiple
              :on-change="handleChange"
              :limit="3"
              :on-exceed="handleExceed"
            >
                <el-button style="float:left">选择文件</el-button>
            </el-upload>
          </div>
            <p align="left">图片: </p>
            <hr>
            <div style="text-align:left;">
            <el-upload
         
            class="upload-demo"
            action="http://1.14.73.59:8080/enterprise/scFile"
            :on-success="success"
            :on-remove="handleRemove"
            list-type="picture"
          >   <el-button style="float:left">选择文件</el-button>
         
          </el-upload>
          </div>
        </span>
       </div>
       <div id="content6" v-show="number == 5">
         <span>
          <el-form label-width="200px" :inline="true" :model="formInline" class="demo-form-inline">
      <el-row>
        <el-col span="16">
            <el-form-item label="计划投资额">
        <el-input v-model="plan_amount" placeholder="计划投资额" />
           </el-form-item>
        </el-col>
        <el-col span="16">
            <el-form-item label="已完成投资额">
        <el-input v-model="finish_amount" placeholder="已完成投资额" />
        </el-form-item>
        </el-col>
        <el-col span="8">
            <el-form-item label="总规划面积">
        <el-input v-model="total_area" placeholder="总规划面积" />
           </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span="8">
            <el-form-item label="规划建筑面积">
        <el-input v-model="plan_build_area" placeholder="规划建筑面积" />
       </el-form-item>
         </el-col>
        <el-form-item label="规划机房面积">
        <el-input v-model="plan_room_area" placeholder="规划机房面积" />
      </el-form-item>
      <el-form-item label="已建面积">
        <el-input v-model="build_area" placeholder="已建面积" />
      </el-form-item>
    </el-row>
    <el-row>
      <el-form-item label="在建面积">
        <el-input v-model="be_area" placeholder="在建面积" />
      </el-form-item>
      <el-form-item label="数据中心建设等级">
        <el-input v-model="build_grade" placeholder="数据中心建设等级" />
      </el-form-item>
      <el-form-item label="规划模块化机房数量">
        <el-input v-model="plan_area" placeholder="规划模块化机房数量" />
      </el-form-item>
    </el-row>
    <el-row>
      <el-form-item label="规划机柜数量">
        <el-input v-model="plan_number" placeholder="规划机柜数量" />
      </el-form-item>
      <el-form-item label="已建成机柜数量">
        <el-input v-model="build_numer" placeholder="已建成机柜数量" />
      </el-form-item>
      <el-form-item label="单机柜实际平均功率">
        <el-input v-model="average_power" placeholder="单机柜实际平均功率" />
      </el-form-item>
      </el-row>
     <el-row>
        <el-form-item label="规划机柜电力设计总功率">
        <el-input v-model="total_power" placeholder="规划机柜电力设计总功率" />
      </el-form-item>
      <el-form-item label="机房制冷方式">
        <el-input v-model="refrigeration " placeholder="规划机柜电力设计总功率" />
      </el-form-item>
      <el-form-item label="机房已认证等级">
        <el-input v-model="attestation_grade" placeholder="机房已认证等级" />
      </el-form-item>
      <el-form-item label="网络资源情况">
        <el-input v-model="network_res" placeholder="网络资源情况" />
      </el-form-item>
     </el-row>
    </el-form>
         </span>
       </div>
     </div>
     <div class="part">
      <el-button @click="save" >保存</el-button>
      <el-button @click="close">关闭</el-button>
     </div>
   </div>
 </template>
 
 <script>
 import { ref } from 'vue'
 import crumbs from '../../user management/crumb/crumb.vue'
 import {useStore} from 'vuex'
 import {useRouter} from 'vue-router'
 import axios from "axios"
 import { ElMessage, ElMessageBox } from 'element-plus' 

   export default{
     name: "create",
     components:{
        crumbs,
    },
     data() {
       return {
         number: 0, //点击后的值，与下标同步，为0表示默认第一个按钮与div为选中状态
         dataList: [
           {option: '企业基本信息'},
           {option: '经营地所在信息'},
           {option: '注册地所在信息'},
           {option: '联系方式信息'},
           {option: '附件信息'},
           {option: '行业信息'},
       ]
       }
     },
     methods: {
       //定义切换方法
       tab(index) {
         this.number = index;
         // console.log(index, this.number);
       }
     },
     setup(){
      const store=useStore();
      const router=useRouter();
      const close = () => {
        router.push('/basic')
    }
    //参数
    //查看
         let  name=ref("")
         let  organization_code=ref("")
         let  sc_number=ref("")
         let  founding_time=ref("")
         let  capital=ref("")
         let  grade=ref("")
         let  classify=ref("")
         let  type=ref("")
         let  industry=ref("")
         let  scale=ref("")
         let  status=ref("")
         let  representative=ref("")
         let  tel=ref("")
         let  phone=ref("")
         let  email=ref("")
         let  update_time=ref("")
         let  province=ref("")
         let  land=ref("")
         let  zone=ref("")
         let  street=ref("")
         let  address=ref("")
         let  postalcode=ref("")
         let  park=ref("")
         let  build=ref("")
         let  plan_amount=ref("")
         let  finish_amount=ref("")
         let  be_area=ref("")
         let  total_area=ref("")
         let  plan_build_area=ref("")
         let  plan_room_area=ref("")
         let  build_area=ref("")
         let  build_grade=ref("")
         let  plan_area=ref("")
         let  average_power=ref("")
         let  plan_number=ref("")
         let  refrigeration=ref("")
         let  attestation_grade=ref("")
         let  build_numer=ref("")
         let  total_power=ref("")
         let  tel2=ref("")
         let  faxcode=ref("")
         let  name2=ref("")
         let  job=ref("")
         let  phone2=ref("")
         let  email2=ref("")
         let  url=ref("")
         let  province2=ref("")
         let  land2=ref("")
         let  zone2=ref("")
         let  street2=ref("")
         let  address2=ref("")
         let  postalcode2=ref("")
         let  park2=ref("")
         let  build2=ref("")
         let  network_res=ref("")
         //渲染表格
         function GetUserData(){
     axios({
      url:'http://1.14.73.59:8080/enterprise/findEnterpriserInformationByCondition',
      method:'post',
      params:{
        limit:1,
        pageIndex:1,
        pageSize:10,
      }
    }).then(resp=>{
     console.log(resp.data.data)
     userList.value=resp.data.data
     totallenght.value=resp.data.data.length
     console.log(totallenght.value)
     })
         }
//上传文件
const success=()=>{
       console.log(11111222)
}

//新建
    const save=()=>{
      console.log(typeof name.value)
      router.push('/basic')
      axios({
        url:"http://1.14.73.59:8080/enterprise/addEnterpriserInformation",
        method:"post",
        data:{
          address: address.value,
          address2: address2.value,
          appendix_id: 0,
          attestation_grade: attestation_grade.vlue,
          average_power: average_power.value,
          be_area: be_area.value,
          build:build.value,
          build2: build2.value,
          build_area: build_area.value,
          build_grade: build_grade.value,
          build_numer: build_numer.value,
          capital: 0,
          classify:classify.value,
          contact_id: 0,
          email: email.value,
          email2: email2.value,
          enterprise_userId: 0,
          faxcode:faxcode.value,
          finish_amount: finish_amount.value,
          founding_time: founding_time.value,
          grade: grade.value,
          id: 0,
          industry: industry.value,
          industry_id: 0,
          job:  job.value,
          land: land.value,
          land2: land2.value,
          name: name.value,
          name2: name2.value,
          network_res: network_res.value,
          operate_id: 0,
          organization_code: organization_code.value,
          park: park.value,
          park2: park2.value,
          phone: phone.value,
          phone2:phone2.value,
          plan_amount: plan_amount.value,
          plan_area: plan_area.value,
          plan_build_area: plan_build_area.value,
          plan_number: plan_number.value,
          plan_room_area : plan_room_area.value,
          postalcode : postalcode.value,
          postalcode2 : postalcode2.value,
          province : province.value,
          province2 : province2.value,
          refrigeration : refrigeration.value,
          register_id: 0,
          representative : representative.value,
          sc_number : sc_number.value,
          scale : scale.value,
          status: status.value,
          street: street.value,
          street2: street2.value,
          tel2: tel2.value,
          total_area: total_area.value,
          total_power: total_power.value,
          type: type.value,
          update_time: update_time.value,
          url:url.value,
          tel:tel.value,
          zone: zone.value,
          zone2: zone2.value
        }
      }).then(resp=>{
         console.log("11111111111",resp.data)
         GetUserData()
          name.value=resp.data.data.name
          organization_code.value=resp.data.data.organization_code
          sc_number.value=resp.data.data.sc_number
          founding_time.value=resp.data.data.founding_time
          capital.value=resp.data.data.capital
          grade.value=resp.data.data.grade
          classify.value=resp.data.data.classify
          type.value=resp.data.data.type
          industry.value=resp.data.data.industry
          scale.value=resp.data.data.scale
          status.value=resp.data.data.status
          representative.value=resp.data.data.representative
          update_time.value=resp.data.data.update_time
          email.value=resp.data.data.email
          province.value=resp.data.data.province
          land.value=resp.data.data.land
          zone.value=resp.data.data.zone
          street.value=resp.data.data.street
          address.value=resp.data.data.address
          postalcode.value=resp.data.data.postalcode
          park.value=resp.data.data.park
          plan_amount.value=resp.data.data.plan_amount
          finish_amount.value=resp.data.data.finish_amount
          be_area.value=resp.data.data.be_area
          total_area.value=resp.data.data.total_area
          plan_build_area.value=resp.data.data.plan_build_area
          plan_room_area.value=resp.data.data.plan_room_area
          build_area.value=resp.data.data.build_area
          build_grade.value=resp.data.data.build_grade
          plan_area.value=resp.data.data.plan_area
          plan_number.value=resp.data.data.plan_number
          refrigeration.value=resp.data.data.refrigeration
          attestation_grade.value=resp.data.data.attestation_grade
          build_numer.value=resp.data.data.build_numer
          total_power.value=resp.data.data.total_power
          network_res.value=resp.data.data.network_res
          faxcode.value=resp.data.data.faxcode
          name2.value=resp.data.data.name2
          job.value=resp.data.data.job
          phone2.value=resp.data.data.phone2
          email2.value=resp.data.data.email2
          url.value=resp.data.data.url
          province2.value=resp.data.data.province2
          land2.value=resp.data.data.land2
          zone2.value=resp.data.data.zone2
          street2.value=resp.data.data.street2
          address.value=resp.data.data.address
          address2.value=resp.data.data.address2
          postalcode2.value=resp.data.data.postalcode2
          park2.value=resp.data.data.park2
          build2.value=resp.data.data.build2
      })
    }
    return {
          close,
          router,
          store,
          save,
          ElMessage,
          ElMessageBox,
          ref,
          name,
          organization_code,//组织机构代码
          sc_number,//社会信用证编号
          founding_time,//成立时间
          capital,//注册资本（万元）
          grade,//企业分级
          classify,//企业分类
          type,//控股类型
          industry,//所属行业
          scale,//单位规模
          status,//运营状态
          representative,//法人代表
          tel,//法人固话
          phone,//法人手机
          email,//法人邮箱
          update_time,
          province,//省
          land,//地
          zone,//区
          street,//街
          address,//详细地址
          postalcode,//邮政编码
          park,//所属园区
          build,//所属楼宇
          plan_amount,//计划投资额
          finish_amount,//已完成投资额
          be_area,//在建面积
          total_area,//总规划面积
          plan_build_area,//规划建筑面积
          plan_room_area,//规划机房面积
          build_area,//已建面积
          build_grade,//数据中心建设等级
          plan_area,//规划模块化机房数量
          average_power,//单机柜实际平均功率
          plan_number,//规划机柜数量
          refrigeration,//机房制冷方式
          attestation_grade,//机房已认证等级
          build_numer,//已建成机柜数量
          total_power,//规划机柜电力设计总功率
          network_res,//网络资源情况
          tel2,//联系电话
          faxcode,//传真号码
          name2,//联系人姓名
          job,//职务
          phone2,//手机
          email2,//邮箱
          url,//网址
          province2,
          land2,
          zone2,
          street2,
          address2,
          postalcode2,
          park2,
          build2,
          success
         
  }
  }
  
   }
 </script>
 
 <style scoped lang="less">
 .crumbs{
  margin-bottom:20px;
 }
   .content {
     margin:auto;
     width:90%;
     /*按钮样式*/
     /*未选中时*/
     .title{
        display:flex;
        justify-content:space-between;

     }
 
     /*选中时*/
     .btn1 {
       border: 0;
       color:#51D2D2;
     }
 
     #content1, #content2, #content3, #content4 {
       height: 300px;
       width:100%;
       display:flex;
       justify-content:space-between;
     }
   }
   .part{
    // border:1px solid red;
    margin-top:100px;
   }
 </style>
 